<!-- 供应商对账看板 -->

<script setup>

import CommonBox from "../../components/CommonBox.vue";
import CommonBox2 from "../../components/CommonBox2.vue";
import {onMounted, ref} from "vue";
import screenApi from "../../api/screen.js";
import dayjs from 'dayjs';
import router from "../../router/index.js";

//成品管段列表加载中设置
const listLoading = ref(false);

//成品管段统计加载中设置
const statisticsLoading = ref(false);

const formData = reactive({
  'queryDate': new Date()
})

const dataTotal = ref(
    {
      legend: {
        orient: 'vertical',
        right: 20,
        top: '30%',
        textStyle: {
          color: 'white'
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        showContent: true
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          formatter: function(value) {
            return value;
          },
          rotate: 45
        }
      },
      yAxis: { gridIndex: 0,height:600 },
      series: [
        {
          name: '入库',
          type: 'bar',
          data: []
        },
        {
          name: '出库',
          type: 'bar',
          data: []
        }
      ]
});

const dataMap = ref({});

function storeDataMap() {
  listLoading.value = true;
  screenApi.storeDataMap().then(res=>{
    if(res.statusCode === 200){
      dataMap.value = res.data;
    } else {
      alert("获取数据失败："+ res.message);
    }
    listLoading.value = false;
  }).catch(e=> {
    alert('获取数据异常');
    listLoading.value = false;
  });
}

function storeBarChat() {
  const requestData = {...formData};
  requestData.queryDate = dayjs(requestData.queryDate).format('YYYY-MM');
  statisticsLoading.value = true;
  screenApi.storeBarChat(requestData).then(res=>{
    if(res.statusCode === 200){
      dataTotal.value.series[0].data = res.data.dataIn;
      dataTotal.value.series[1].data = res.data.dataOut;
      dataTotal.value.xAxis.data = res.data.dataDate;
    } else {
      alert("获取统计数据失败："+ res.message);
    }
    statisticsLoading.value = false;
  }).catch(e=> {
    alert('获取统计数据异常');
    statisticsLoading.value = false;
  });
}

onMounted(async () => {
  //数据
  storeDataMap();
  storeBarChat();
});

</script>

<template>
  <div class="head">
    <h1>成品管段统计图</h1>
  </div>

  <div>
    统计日期：<el-date-picker type="month" v-model="formData.queryDate"></el-date-picker> <button @click="storeBarChat">查询</button>
  </div>

  <div class="board-row" v-loading="listLoading" element-loading-text="加载中...">
    <common-box>
    <div class="box">
      <div class="vitas-data">
        <div class="vitas-content" style="background-color: green;">
          <div style="text-align: center;">
            <div>库存量</div>
            <div style="color: yellow">{{dataMap.storeData }}</div>
          </div>
        </div>
      </div>
    </div>
  </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: green;">
            <div style="text-align: center;">
              <div>待入库量</div>
              <div style="color: yellow">{{dataMap.waitStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: green;">
            <div style="text-align: center;">
              <div>已入库量</div>
              <div style="color: yellow">{{dataMap.inStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: green;">
            <div style="text-align: center;">
              <div>已出库量</div>
              <div style="color: yellow">{{dataMap.outStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: yellow;">
            <div style="text-align: center;">
              <div style="color: red">入库当日</div>
              <div style="color: red">{{dataMap.dayInStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: yellow;">
            <div style="text-align: center;">
              <div style="color: red">入库当周</div>
              <div style="color: red">{{dataMap.weekInStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: yellow;">
            <div style="text-align: center">
              <div style="color: red">入库当月</div>
              <div style="color: red">{{dataMap.monthInStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: yellow;">
            <div style="text-align: center">
              <div style="color: red">入库比率</div>
              <div style="color: red">{{dataMap.rateInStoreData }}%</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: blue;">
            <div style="text-align: center;">
              <div>出库当日</div>
              <div style="color: yellow">{{dataMap.dayOutStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: blue;">
            <div style="text-align: center;">
              <div>出库当周</div>
              <div style="color: yellow">{{dataMap.weekOutStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: blue;">
            <div style="text-align: center;">
              <div>出库当月</div>
              <div style="color: yellow">{{dataMap.monthOutStoreData }}</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content" style="background-color: blue;">
            <div style="text-align: center;">
              <div>出库比率</div>
              <div style="color: yellow">{{dataMap.rateOutStoreData }} %</div>
            </div>
          </div>
        </div>
      </div>
    </common-box>
  </div>

  <div class="board-row" v-loading="statisticsLoading" element-loading-text="加载中...">
    <common-box2>
      <div class="chart-header">
        成品管段日度趋势
      </div>
      <div style="height: 30em;width: 100%;">
        <v-chart :option="dataTotal"></v-chart>
      </div>
    </common-box2>
  </div>
</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}

.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 6em;
  height: 6em;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 6em;
  overflow: hidden;
}

.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}
.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>